<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

   <link rel="stylesheet" href="style/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style/css/table.css" />
 
  <script src="style/js/jquery-3.2.1.min.js"></script>
  
  
  <title></title>
 </head>
 <body>
   <div id="xbase-table-box">
		  <div id="xbase-table-toolbar">
			<!-- http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm   菜单图标定义 -->
			<button type="button" class="btn btn-default btn-sm" id="back_btn">
				<span class="glyphicon glyphicon-share-alt"></span> 返回上级
			</button>
			
			<button type="button" class="btn btn-default btn-sm" id="table_delete_btn">
				<span class="glyphicon glyphicon-trash"></span> 导出数据
			</button>

			<button type="button" class="btn btn-default btn-sm" id="table_mod_btn">
				<span class="glyphicon glyphicon-pencil"></span> 编辑案列
			</button>
		  </div>
		  <table 
		  	id="xbase-table"
		    data-url="data.json"
		    data-sort-name="id"
		    data-sort-order="asc"
		    data-extra-param="aaa=2&bbb=4&vvv=444" 
		    data-toolbar-onclick="true" 
		    auto-refresh-table="false" 
		    refresh-table-interval="20" 
		    show-pagination="true"
		    pagination-limit="10"
		    show-table-row-dbclick="true"
		    >  
			  <tr id="xbase-table-header">
				<th data-name="checkbox">全选</th>
				<th data-name="id" data-width="50">ID</th>
				<th data-name="name">名称</th>  
				<th data-name="price">价格</th>
				<th data-name="image" data-function="imageController">图片</th>
				<th data-name="operation" data-function="operationController">操作</th>
			  </tr>  
		</table>  
		<div id="xbase-table-loading">正在加载数据..</div>
		<div id="xbase-table-pagination"></div>
	</div>

<script src="style/js/table.js"></script>
<script src="style/js/child.js"></script>
<script language="javascript" type="text/javascript">

	function toolBarOnClick(index){
    	alert("触发菜单栏");
	}
	
	function tableRowClick(index,row){
		alert(JSON.stringify(row));
	}

	//渲染图片显示的方法
	function imageController(index,value,row){
		return "<img src='"+ value +"' />";
	}
	
	function operationController(index,value,row){
		return "<a href=''>删除"+ index +"</a>";
	}
	
</script>
 </body>
</html>
